@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}   
section{
    display: flex;
    flex-wrap: wrap;
    margin: 4vw 0;
}
.box{     
        margin: 4vw 4vw;
      padding: 3vw 4vw;
            box-sizing: border-box;
            display: flex;
           width: 30vw;
           height: 30vw;
        background: white;
           border: 1px solid coral;     
       span{
        display: block;
        width: 5vw;
        height: 5vw;
        background: darkslategrey;
        border-radius: 50%;
    }
    .contant{
        width: 100%;
        display: flex;height: 5vw;
    }
}

.one{
    justify-content: center;
    align-items: center;
}
.two{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
}

.three{
    justify-content: space-between;
   span:nth-of-type(2){
       align-self:center;
   }  
   span:last-of-type{
       align-self: flex-end;
   } 
}

.four{
    flex-wrap: wrap;
    align-content: space-between;
       .contant{
           justify-content: space-between;
       span{
        
}}
}

.five{  
     width: 30vw;
       flex-wrap: wrap;
       align-content: space-between;
    .contant{
        justify-content: space-between;
        width: 100%;
        
    }
    div:nth-of-type(2){
        justify-content: center;
    }
}

.six{
    flex-wrap: wrap;
    align-content: space-between;
    .contant{
        justify-content: space-between;
    }
}
.seven{
    flex-wrap: wrap;
    align-content: space-between;
    .contant{
        justify-content: space-between;
    }
    div:nth-of-type(2){
        justify-content: center;
    }
}

.eight{
    flex-wrap: wrap;
    align-content: space-between;
    .contant{
        justify-content: space-between;
    }
}


.ninth{
    flex-wrap: wrap;
    align-content: space-between;
    .contant{
        justify-content: space-between;
    }
}
